<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>virt-vue</title>
</head>
<body>
  <div id="app"></div>
  <script>
    let data = {
      msg: 'hello'
    }

    let vm = {}

    // 模拟数据劫持
    Object.defineProperty(vm, 'msg', {
      // 可枚举（可遍历）
      enumerable: true,
      // 可配置（可以使用delete删除，可以通过defineProperty重新定义）
      configurable: true,
      // 获取值
      get () {
        console.log('get', data.msg)
        return data.msg
      },
      // 设置值
      set (newData) {
        console.log('set', newData)
        if(newData === data.msg) return
        data.msg = newData
        document.querySelector('#app').textContent = data.msg
      }
    })

    console.log(vm.msg)

    vm.msg = 'hello app'
  </script>
</body>
</html>